/*
  学习目标：嵌套路由
*/

import React from 'react';
import { BrowserRouter as Router, NavLink, Redirect, Route, Switch, Link } from 'react-router-dom';
import './base.css';

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <NavLink activeClassName="xxx" to="/home">
            首页
          </NavLink>
          <br />
          <NavLink activeClassName="xxx" to="/my">
            我的音乐
          </NavLink>
          <br />
          <NavLink activeClassName="xxx" to="/friend" exact>
            朋友
          </NavLink>
          <Switch>
            <Redirect from="/" to="/home" exact />
            <Route path="/home" component={Home} />
            <Route path="/home" component={Home} />
            <Route path="/home" component={Home} />
            <Route path="/home" component={Home} />
            <Route path="/my" component={MyMusic} />
            <Route path="/friend" component={Friend} />
          </Switch>
        </div>
      </Router>
    );
  }
}

function Friend() {
  return (
    <div>
      <Link to="/friend/friend1">朋友1</Link>
      <br />
      <Link to="/friend/friend2">朋友2</Link>
      <br />
      <Link to="/friend/friend3">朋友3</Link>
      <h1>我是朋友组件</h1>
      {/* 1. 在父组件中, 再次使用Switch+Route, 设置二级路由规则和挂载点 */}
      {/* 2. path的值, to的值, 要写成两层路径: /父路径/子路径 */}
      {/* 3. 💥父子级路径, 可以同名, 互不影响 */}
      {/* 4. 💥嵌套路由时, 一般不能给父路由, exact */}
      <Switch>
        <Route path="/friend/friend1" component={Friend1} />
        <Route path="/friend/friend2" component={Friend2} />
        <Route path="/friend/friend3" component={Friend3} />
      </Switch>
    </div>
  );
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend1() {
  return <h2>我是朋友组件1</h2>;
}
function Friend2() {
  return <h3>我是朋友组件2</h3>;
}
function Friend3() {
  return <h4>我是朋友组件3</h4>;
}
